<template>
	<view class="content">
		<view class="info">
			<view class="row1">
				<text class="text1">{{ data.free }}</text>
				<text class="text2">{{ data.one_num }}/{{ data.full }}</text>
			</view>
			<!-- <view class="row2"><text>·活动时间：永久</text></view> -->
			<view class="row3">
				<text>当前为{{ data.one_num }}/{{ data.full }}单:</text>
				<bolck v-for="(item2, index2) in data.full + 1" :key="index2">
					<image
						src="../../../static/duixiang2.png"
						mode=""
						v-if="index2 < data.one_num"
					></image>

					<image
						src="../../../static/caise2.png"
						mode=""
						v-else-if="
							index2 === data.full && data.one_num < data.full
						"
					></image>
					<image
						src="../../../static/caise333.png"
						mode=""
						v-else-if="
							index2 === data.full && data.one_num === data.full
						"
					></image>
					<image
						src="../../../static/duixiang3.png"
						mode=""
						v-else
					></image>
				</bolck>
			</view>
		</view>
		<view class="info1">
			<view class="row1">
				<text>消费金额:</text>
				<view>
					<input
						v-model="money"
						type=""
						maxlength="5"
						placeholder="询问服务员后输入"
						@blur="enterTheAmt"
						auto-focus
					/>
					<text>元</text>
				</view>
			</view>
			<view class="row2"></view>
			<view class="row3">
				<text class="text1">
					再买{{
						data.one_num === data.full ? '0' : data.free_num
					}}单可免1单
				</text>
				<view class="box1">
					<text>任务总免单金（当前）</text>
					<text>￥{{ data.free_money }}</text>
				</view>
				<view class="box2">
					<text>本次可免</text>
					<text>￥{{ data.free_mon }}</text>
				</view>
				<text class="text2">
					免单金计算规则本次任务最后1单为免单金额为前{{
						data.full
					}}单平均买单金额。
				</text>
			</view>
		</view>
		<view class="info2">
			<text class="text">实付金额:</text>
			<text class="text1">￥{{ amt === null ? 0 : amt }}</text>
		</view>
		<view class="confirm">
			<button type="default" @click="$u.throttle(confirmBuyOrdr, 3000)">
				确认买单
			</button>
		</view>
	</view>
</template>

<script>
// const unipay = require('unipay');
export default {
	data() {
		return {
			sid: 0,
			uid: '',
			data: {},
			money: '',
			price: 0,
			amt: 0,
			code: ''
		};
	},
	methods: {
		// 输入金额
		enterTheAmt() {
			var RegExp = /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/;

			var num = Number(this.money).toFixed(2) - this.data.free_mon;
			// console.log(' Number(this.money) :>> ', Number(this.money));
			// console.log('this.data.free_mon :>> ', this.data.free_mon);
			// console.log('ddddddddd', RegExp.test(num));
			var numm = num.toFixed(2);

			// if (RegExp.test(num) === false) {
			// 	uni.$showMsg('请输入正确的金额');
			// 	this.money = '';
			// 	this.amt = 0;
			// } else {
			//this.amt = numm;
			// }
			if (Number(this.money) === 0) {
				return uni.$showMsg('请输入正确的金额');
			}
			if (Number(numm) === 0 && this.data.free_mon !== 0) {
				this.amt === '';
				//return uni.$showMsg('请输入正确的金额2');
				return false;
			}
			console.log('numm 1111111:>> ', numm);
			console.log('Number(numm) :>> ', Number(numm));
			if (Number(numm) >= 0) {
				this.amt = numm;
			} else {
				this.amt = 0;
				this.$forceUpdate();
			}
		},
		//获取用户买单
		async getPaid() {
			const { data: res } = await this.$u.post('api/shop/user_pay', {
				sid: this.sid,
				uid: this.uid
			});
			console.log('res >>  ', res);
			this.data = res;
			console.log('this.data :>> ', this.data);
		},
		//确认买单提交
		async confirmBuyOrdr() {
			if (this.money === 0 && this.data.free_money === 0)
				return this.amt === '';

			if (this.amt > 0) {
				const res = await this.$u.post('api/shop/user_save_pay', {
					uid: this.uid,
					sid: this.sid,
					money: this.money,
					price: this.amt,
					free: this.data.free_mon
				});
				console.log('res11111 :>> ', res);
				const res2 = await this.$u.post('api/wxpay/get_signature', {
					uid: this.uid,
					sid: res.data
				});

				console.log('返回的订单数据 >> ', res2);
				var _this = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res2.timeStamp,
					nonceStr: res2.nonceStr,
					package: res2.package,
					signType: 'MD5',
					paySign: res2.paySign,
					success: function(res) {
						uni.$showMsg('支付成功');
						console.log('success11:' + JSON.stringify(res));
						uni.reLaunch({
							url: '../../ordr/ordr'
						});
					},
					fail: function(err) {
						uni.$showMsg('支付失败');
						_this.amt = 0;
						_this.money = '';
						console.log('fail111:' + JSON.stringify(err));
					}
				});
			} else if (
				this.amt === 0 &&
				this.data.free_mon !== 0 &&
				Number(this.money) !== 0 &&
				this.data.free_money !== 0
			) {
				console.log('***** :>> ', this.amt);
				const res = await this.$u.post('api/shop/user_save_pay', {
					uid: this.uid,
					sid: this.sid,
					money: this.money,
					price: this.amt,
					free: this.data.free_money
				});
				uni.reLaunch({
					url: '../../ordr/ordr'
				});
				uni.$showMsg('支付成功');
				console.log('res11111 :>> ', res);
			} else {
				return this.amt === '';
			}
		}
	},
	onLoad(e) {
		try {
			const uid = uni.getStorageSync('uid');
			if (uid) {
				this.uid = uid;
			}
		} catch (e) {
			// error
		}
		this.sid = e.sid;
		console.log('this.sid :>> ', this.sid);
		this.getPaid();
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 20rpx;

	.info {
		width: 690rpx;
		// height: 184rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 25rpx 31rpx;

		.row1 {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.text1 {
				display: inline-block;
				width: 136rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				background: linear-gradient(90deg, #ff6494 0%, #ffa86a 100%);
				border-radius: 5px;
				padding: 0 26rpx;

				font-size: 24rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: bold;
				color: #fefefe;
			}
			.text2 {
				width: 80rpx;
				height: 40rpx;
				line-height: 38rpx;
				text-align: center;
				border: 1rpx solid #ff0000;
				border-radius: 20rpx;

				font-size: 24rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 500;
				color: #ff0000;
			}
		}

		.row2 {
			margin-bottom: 16rpx;
			text {
				font-size: 24rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: bold;
				color: #ff6767;
			}
		}

		.row3 {
			display: flex;
			height: 40rpx;
			align-items: center;
			text {
				font-size: 24rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
			}
		}
	}

	.info1 {
		width: 690rpx;
		// height: 334rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx 31rpx;
		.row1 {
			display: flex;
			justify-content: space-between;
			view {
				display: flex;
				justify-content: end;
			}
		}
		.row2 {
			width: 630rpx;
			height: 2rpx;
			margin-top: 15rpx;
			background: #dedede;
		}
		.row3 {
			.text1 {
				font-size: 30rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #ff6767;
				display: inline-block;
				margin-bottom: 19rpx;
				margin-top: 19rpx;
			}
			.text2 {
				font-size: 24rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #ffb346;
			}
			.box1,
			.box2 {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-bottom: 19rpx;
			}
		}
	}

	.info2 {
		width: 690rpx;
		height: 100rpx;
		//background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 35rpx;

		.text {
			//background: #ffffff;
			//box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
			border-radius: 20rpx;
		}

		.text1 {
			font-size: 30rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #ff0000;
		}
	}

	.confirm {
		button {
			width: 690rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: linear-gradient(90deg, #ffa73d, #ffdd65);
			border-radius: 50rpx;
			font-size: 30rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: bold;
			color: #ffffff;
			margin-top: 206rpx;
			text-align: center;
		}
	}
}
</style>
